﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .rendered {
            padding: 5px;
            margin: 18px 0 30px;
            border: 1px dashed #ccc;
            font-family: Consolas, monospace;
            overflow: auto;
            display: block;
            background-color: #ffbfda;
        }
    </style>
    <link href="/css/article.css" rel="stylesheet" />
</head>
<body>
    <div class="content article-page article-content">
        <span>
            <h1>Ehancements offered by BLADE engine</h1>
            <p>While the BLADE engine honors ASP.NET Razor syntax, it does offer enhanced syntax on its own for flexibility.</p>
            <h3>Space after @@</h3>
            <p>This code will create an error in Razor. For blade, it is treated as plain text without raising exception. This is necessary because not everything is HTML and C#.</p>
            <pre class="prettyprint prettyprinted">
                    @ { }
                </pre>
            <p>Rendered results:</p>
            <div class="rendered">
                @ { }
            </div>
            <h3>Literal text in codes</h3>
            <p>Razor allows us to write codes within html text by using the @@{ } escape. However, when it comes to
            arbitrary escape from code to text, we are out of luck. We either have to write an HTML tag or use the @@HTML helper methods.
            In practice, both approach can be cumbersome and force us to come up with hacks. From my personal experience, I frequently
            have to copy the HTML output from Razor and replace the @@HTML helper completely in order to customize the output the way I like it.</p>
            <p>With BLADE, we can escape from code to text by using @@! ... !@@ convention.</p>
            <p>Note that unlike Razor, when we escape using this convention, everything within the @@!...!@@ block will be considered as text.</p>
            <pre class="prettyprint prettyprinted">
                @@{
                    //we are inside a code block
                    //we're going to go back to HTML mode, the RAZOR style
                    &lt;div&gt;
                            &lt;!--We're inside HTML now--&gt;
                    &lt;/div&gt;

                    //RAZOR forces us to start with a HTML tag, what if we don't want that?
                    //Let's 'dance' between code and text
                    @@! Hello there, it is lovely to be able to write text directly !@@
                    &lt;br /&gt;
                    @@! The current time now is : !@@ @@DateTime.Now
                    &lt;br /&gt;

                    //here is another example
                    for (int i = 0; i < 10; i++)
                    {
                        @@!This is line #!@@ @@i.ToString()
                        &lt;br /&gt;
                    }
                }
            </pre>
            <p>Rendered results:</p>
            <div class="rendered">
                @{
                    //we are inside a code block
                    //we're going to go back to HTML mode, the RAZOR style
                            <div>
                                <!--We're inside HTML now-->
                            </div>

                            //RAZOR forces us to start with a HTML tag, what if we don't want that?
                            //Let's 'dance' between code and text
                            @! Hello there, it is lovely to be able to write text directly !@
                                <br />
                                @! The current time now is : !@ @DateTime.Now
                                     <br/>

                    //here is another example
                    for (int i = 0; i < 10; i++)
                    {
                            @!This is line #!@ @i.ToString() <br />
                    }
                }
            </div>
            <h3>@@ inference</h3>
            <p>Unlike ASP.NET RAZOR, BLADE does not infer what @@ means by looking at code or HTML tag. The reason is because BLADE needs to be independent and as cross-platform compatible as possible.</p>
            <pre class="prettyprint prettyprinted">
                &lt;!-- This line does not need an escape because BLADE can determine which  is text and which is inline code--&gt;
                &lt;p&gt;Email me at user@domain.com to tell me the current time is: @@DateTime.Now&lt;/p&gt;

                &lt;!-- This line will need escaping because BLADE cannot differentiate between text and inline code--&gt;
                &lt;p&gt;The lady @@@@Foxy did not say what time she came. I assumed it was @@DateTime.Now.AddDays(-1)&lt;/p&gt;
            </pre>
            <p>Rendered results:</p>
            <div class="rendered">
                <!-- This line does not need an escape because BLADE can determine which  is text and which is inline code-->
                <p>Email me at user@domain.com to tell me the current time is: @DateTime.Now</p>

                <!-- This line will need escaping because BLADE cannot differentiate between text and inline code-->
                <p>The lady @@Foxy did not say what time she came. I assumed it was @DateTime.Now.AddDays(-1)</p>
            </div>
        </span>
    </div>
</body>
</html>